<template>
	<view class="DetailsSubstitute">
		<!-- 骨架 -->
		<view class="skeleton-style" v-if="loading">
			<u-skeleton :title="false" rowsWidth="718rpx"
				:rowsHeight="['128rpx','212rpx','256rpx','256rpx','212rpx','468rpx']" rows="8"
				:loading="loading"></u-skeleton>
		</view>
		<!-- 订单信息 -->
		<view class="order-status font-weight-600 size-40 color0">{{listProxy[orderData.orderStatus].name}}</view>
		<!-- 		<view class="ordering-info radius12 margin-bottom-20" @click="trackingShow=true">
			<view class="dis margin-bottom-20">
				<text class="font-weight-600 color3 size-40">
					{{listProxy[orderData.orderStatus].name}}
				</text>
				<text class="iconfont icon-right-1-copy color9 size-24"></text>
			</view>
						<up-count-down :time="300000" format="mm:ss" @change="onChange">
				<view class="time font-weight-400 color9 size-24 dis">
					<text>剩余支付时间 {{ timeData.minutes <10 ? `0${timeData.minutes}`:timeData.minutes }}:</text>
					<text>{{ timeData.seconds <10 ? `0${timeData.seconds}`:timeData.seconds }}</text>
				</view>
			</up-count-down>
						<view class="dis margin-bottom-12">
				<up-button type="primary"
					:customStyle="{width: '340rpx',height: '80rpx',margin: 0,borderRadius: '100rpx'}"
					:color="settings.color" @click="onJumpPage">
					<text class="color-f font-weight-500 size-28">提交订单</text>
				</up-button>
			</view>
			<view class="text-align font-weight-400 color9 size-30 margin-bottom-12">
				{{ orderData.deliveryType ==1 ? listProxy[orderData.orderStatus].tis : listProxy[orderData.orderStatus].tisx}}
			</view>
						<view class="text-align font-weight-400 color9 size-24" v-if="![1,6].includes(orderData.orderStatus)">
				预计{{orderData.dayTime == 0 ? '今日' : '明日'}} {{orderData.startTime}}-{{orderData.endTime}}送达
			</view>
		</view> -->
		<!-- 送货网格员 -->
		<view class="operator f-background radius12 padding-left-24 margin-bottom-20"
			v-if="![3,6].includes(orderData.orderStatus)">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">跑腿员</view>
			<view class="picture-info dis-cen">
				<view class="dis-ali">
					<!-- <image class="picture radius100" src="" mode=""></image> -->
					<image class="picture radius100" v-if="userAuthRespVo.imagePhoto" :src="userAuthRespVo.imagePhoto"
						mode="">
					</image>
					<image class="picture radius100" v-else src="@/static/icons/txs.png" mode=""></image>
					<view class="picture-margin">
						<view class="font-weight-500 color3 size-30 margin-bottom-12">{{userAuthRespVo.realName}}</view>
						<view class="font-weight-400 color-9e size-26">已安全送达{{pickupPkgCount || 0}}件</view>
					</view>
				</view>
				<view class="contact dis radius100" @click="onPhone(userAuthRespVo.telephone)">
					<image class="icons por" :src="`${OnlineStatic}sj.png`"></image>
					<text class="font-weight-400 size-20 color">联系他</text>
				</view>
			</view>
		</view>
		<!-- 送货地址 -->
		<view class="shipto f-background radius12 padding-left-24 margin-bottom-20">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">送货地址</view>
			<view class="shipto-info">
				<view class="font-weight-600 color3 size-36 margin-bottom-24">
					{{orderData.addrType == 2 ? orderData.addressInfo : orderData.communityName}}
					<text v-if="orderData.houseNumber">-{{orderData.houseNumber}}</text>
				</view>
				<view class="font-weight-400 color-9e size-32">
					{{orderData.consignee}}{{sexData[orderData.sex]}} {{orderData.telephone}}
				</view>
			</view>
		</view>
		<!-- 代买商品 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-20"
			v-if="orderDataDel.deliveryType == 2">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">代买商品</view>
			<view class="pick-codes font-weight-600 color3 size-32">
				{{orderData.purchases.bodyText}}
			</view>
			<view class="picture-info" v-if="orderData.purchases.imgs.length">
				<view class="info-img" v-for="(items,indexs) in orderData.purchases.imgs" :key="indexs">
					<u--image radius="12rpx" :src="items ||'1'" width="120rpx" height="120rpx"
						@click="onPreviewImage(orderData.purchases.imgs,indexs)">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
			</view>
		</view>
		<!-- 自营超市 -->
		<view class="supermarket f-background radius12 padding-left-24 margin-bottom-20"
			v-if="orderData.deliveryType == 3">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">自营超市</view>
			<view class="picture-info">
				<view class="info-img" v-for="(item,index) in orderData.goodsDelivery.goodsDetailList" :key="index">
					<u--image :src="item.goodsUrl" width="120rpx" height="120rpx" radius="12rpx"
						@click="onPreviewImage(codeList,index)">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
					<view class="titles between">
						<view class="dis-cen color3">
							<view class="font-weight-600 size-36">{{item.goodsName || '-'}}</view>
							<view class="font-weight-400 size-32">x{{item.goodsCount || 0}}</view>
						</view>
						<view class="font-weight-600 color size-36">¥{{item.payableAmount || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 取件信息 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-20"
			v-if="orderDataDel.deliveryType == 1">
			<view class="padding-topbio24 font-weight-600 color3 size-32">取件信息</view>
			<view class="border-top" v-for="(item,index) in orderData.pickSiteInfoList" :key="index">
				<view class="" v-if="item.codeType == 3">
					<view class="picture font-weight-400 color6 size-30">取件图片{{item.pickInfos.length || 0}}张</view>
					<view class="picture-info">
						<view class="info-img" v-for="(items,indexs) in item.pickInfos" :key="indexs">
							<u--image radius="12rpx" :src="items.pickCodes ||'1'" width="120rpx" height="120rpx"
								@click="onPreviewImage(item.pickInfos,indexs,true)">
								<view slot="error" style="font-size: 24rpx;">加载失败</view>
							</u--image>
						</view>
					</view>
				</view>
				<view class="picture font-weight-400 color6 size-30" v-if="item.codeType == 1">{{item.siteName || '-'}}
					共{{item.pickInfos.length}}件包裹</view>
				<view class="rmation font-weight-600 color3 size-32" v-if="item.codeType == 1">
					<view class="rmation-code text-align"
						:class="{'left': (indexs) % 3 === 0,'text-align': (indexs) % 3 === 1, 'right': (indexs) % 3 === 2}"
						v-for="(items,indexs) in item.pickInfos" :key="indexs">{{items.pickCodes}}</view>
				</view>
			</view>
		</view>
		<!-- 取件图片 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-20" v-if="orderDataDel.takeUrl">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">取件图片</view>
			<view class="delivery">
				<view class="info-img" v-for="(item,index) in orderDataDel.takeUrl.split(',')" :key="index">
					<u--image :src="item" width="140rpx" height="140rpx"
						@click="onPreviewImage(orderDataDel.takeUrl.split(','),index)">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
			</view>
		</view>
		<!-- 送达图片 -->
		<view class="pick-picture f-background radius12 padding-left-24 margin-bottom-20"
			v-if="orderDataDel.serviceUrl">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">送达图片</view>
			<view class="delivery">
				<view class="info-img" v-for="(item,index) in orderDataDel.serviceUrl.split(',')" :key="index">
					<u--image :src="item" width="140rpx" height="140rpx"
						@click="onPreviewImage(orderDataDel.serviceUrl.split(','),index)">
						<view slot="error" style="font-size: 24rpx;">加载失败</view>
					</u--image>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="ordering f-background radius12 padding-left-24 margin-bottom-20">
			<view class="padding-topbio24 border-bottom font-weight-600 color3 size-32">订单信息</view>
			<view class="ordering-infos">
				<view class="dis-ali" @click="onCopy(orderData.orderId)">
					<view class="info-width font-weight-400 color9 size-28">订单编号</view>
					<view class="dis-ali font-weight-400 color3 size-28">
						<text>{{orderData.orderId}}</text>
						<view class="copy font-weight-400 size-24 dis">复制</view>
					</view>
				</view>
				<view class="dis-ali" v-if="orderData.createTime">
					<view class="info-width font-weight-400 color9 size-28">提交时间</view>
					<view class="font-weight-400 color3 size-28">{{orderData.createTime}}</view>
				</view>
				<!-- 		<view class="dis-ali" v-if="orderData.payTime">
					<view class="info-width font-weight-400 color9 size-28">支付时间</view>
					<view class="font-weight-400 color3 size-28">{{orderData.payTime}}</view>
				</view> -->
				<!-- 				<view class="dis-ali">
					<view class="info-width font-weight-400 color9 size-28">支付方式</view>
					<view class="font-weight-400 color3 size-28">{{orderData.payMent*1 == 2 ? '便利豆抵扣' : '微信支付'}}</view>
				</view> -->
				<view class="dis-ali" v-if="orderData.orderStatus != 3">
					<view class="info-width font-weight-400 color9 size-28">服务方式</view>
					<view class="font-weight-400 color3 size-28">先送后付</view>
				</view>
				<view class="dis-ali">
					<view class="info-width font-weight-400 color9 size-28">跑腿费用</view>
					<view class="font-weight-400 color3 size-28">
						{{orderData.deliveryType == 3 ? '免配送费':'50便利豆/3.0元'}}
					</view>
				</view>
				<view class="dis-ali" v-if="[3,2].includes(orderData.deliveryType)">
					<view class="info-width font-weight-400 color9 size-28">商品费用</view>
					<view class="font-weight-400 color3 size-28" v-if="orderData.deliveryType == 3">
						￥{{orderData.goodsDelivery.payableAmount || 0}}
					</view>
					<view class="font-weight-400 color3 size-28" v-else-if="orderData.deliveryType == 2">
						小票为准
					</view>
				</view>
			</view>
		</view>
		<view class="inset-bottom"></view>
		<!-- 底部操作 -->
		<view class="operate poflb width100 f-background">
			<view class="operate-dis dis-end">
				<u-button type="primary" :plain="true"
					:customStyle="{width: '226rpx',height: '80rpx',borderRadius: '100rpx',margin: 0}" color="#E5E5E5"
					@click="onCancellation" v-if="[3].includes(orderData.orderStatus)">
					<text class="color-6 font-weight-500 size-28">取消订单</text>
				</u-button>
				<u-button type="primary" :plain="true"
					:customStyle="{width: '226rpx',height: '80rpx',borderRadius: '100rpx',margin: '0 0 0 16rpx',border: '1px solid #FFA1A1'}"
					color="#E5E5E5" @click="onJumpPage">
					<text class="color font-weight-500 size-28">联系客服</text>
				</u-button>
			</view>
			<view class="inset-bottom"></view>
		</view>
		<!-- 订单跟踪 -->
		<u-popup :show="trackingShow" round="32rpx" @close="trackingShow=false">
			<view class="tracking dis por">
				<text class=" font-weight-600 color3 size-28">订单跟踪</text>
				<text class="iconfont icon-guanbi poa color6" @click="trackingShow=false"></text>
			</view>
			<view class="flow-path">
				<view class="path dis-cen" :class="{'margin0' : index!=4}" v-for="(item,index) in trackingListData"
					:key="index">
					<view class="path-view dis-ali por">
						<view class="yuan" :class="{'background':index==orderIndex}"></view>
						<text class="size-28" :class="index==orderIndex?'color3':'color9'">
							{{orderData.orderStatus == 6 && index==orderIndex ? item.names : item.name}}
						</text>
						<view class="tiao poa" v-if="index!=trackingListData.length-1"></view>
					</view>
					<view class="size-28" :class="index==orderIndex?'color3':'color9'" v-if="orderDataDel[item.field]">
						{{orderDataDel[item.field]}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { OnlineStatic, ExpressOrderDetail, CancelOrder } from "@/api/index"
	import { settings } from "@/utils/public"
	import { listProxy, pick, sexData } from "@/utils/enumeration/index"
	export default {
		data() {
			return {
				codeList: [],
				orderIndex: 0,
				trackingList: [
					{ name: '已送达', names: '已取消', field: 'deliveryTime' },
					{ name: '已取货', field: 'pickupTime' },
					{ name: '已接单', field: 'acceptanceTime' },
					{ name: '支付成功', field: 'payDate' },
					{ name: '提交订单', field: 'createDate' }
				],
				trackingListData: [],
				disabled: false,
				loading: true,
				trackingShow: false,
				sexData, // 枚举
				pick, // 枚举
				listProxy, // 枚举
				settings,
				timeData: {},
				OnlineStatic,
				orderId: 0,
				orderData: {},
				orderPerData: {},
				userAuthRespVo: {},
				orderDataDel: {},
				pickupPkgCount: 0
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.postExpressOrderDetail()
		},
		methods: {
			// 取消
			async postCancelOrder() {
				const _this = this
				const { code, data } = await CancelOrder({ orderId: this.orderId })
				if (code == '200') {
					uni.showToast({
						title: '操作成功',
						mask: true,
						duration: 1000
					});
					setTimeout(() => {
						_this.postExpressOrderDetail()
					}, 1100)
				}
			},
			// 详情
			async postExpressOrderDetail() {
				let trackingListDatas = []
				const { code, data } = await ExpressOrderDetail({ orderId: this.orderId })
				if (code == '200') {
					this.orderDataDel = data.deliveryOrder
					this.orderData = data.pickOrderInfoList
					this.orderPerData = data.deliveryPerson
					this.userAuthRespVo = data.userAuthRespVo
					this.pickupPkgCount = data.pickupPkgCount
					this.trackingList.map(res => {
						if (data.deliveryOrder[res.field]) {
							trackingListDatas.push(res)
						}
					})
					// this.largeProcessing(data.pickOrderInfoList)
					this.trackingListData = trackingListDatas
					setTimeout(() => {
						this.loading = false
					}, 500)
				}
			},
			// 查看大图处理
			// largeProcessing(list) {
			// 	if (!list.pickSiteInfoList || !list.pickSiteInfoList.length) return
			// 	list.pickSiteInfoList.map(res => {
			// 		console.log(res)
			// 		if (res.codeType == 3) {
			// 			res.pickInfos.map(item => {
			// 				this.codeList.push(item.pickCodes)
			// 			})
			// 		}
			// 	})
			// 	console.log(this.codeList)
			// },
			// onChange(e) {
			// 	this.timeData = e;
			// },
			onJumpPage() {
				uni.navigateTo({
					url: "/packagePerson/contact-us/contact-us"
				});
			},
			// 打电话
			onPhone(telephone) {
				uni.makePhoneCall({
					phoneNumber: telephone + '', // 替换为实际要拨打的电话号码  
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.error('拨打电话失败');
					}
				});
			},
			onPreviewImage(data, index, bool) {
				let dataList = []
				if (bool) {
					data.map(res => {
						dataList.push(res.pickCodes)
					})
				}
				uni.previewImage({
					current: index * 1,
					urls: bool ? dataList : data
				});
			},
			onOperate({ item, type }) {
				this.paramsData.orderId = item.orderId
				// this.deliveryStatus = item.orderStatus
				this.selectData = item
				this.phoShow = true
			},
			// 复制
			onCopy(orderId) {
				uni.setClipboardData({
					data: orderId + "",
					success: function() {
						console.log('success');
						uni.$u.toast('复制成功')
					}
				})
			},
			// 确认取消
			onCancellation() {
				const _this = this
				uni.showModal({
					content: '确认取消该订单吗？',
					success: function(res) {
						if (res.confirm) {
							_this.postCancelOrder()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.DetailsSubstitute {
		padding: 16rpx 16rpx 112rpx;

		.delivery {
			padding: 20rpx 0 30rpx;
		}

		// 订单信息
		.ordering-info {
			padding: 56rpx 0 54rpx;
			background: #ffffff;

			.time {
				margin-bottom: 28rpx;
			}
		}

		.order-status {
			margin: 50rpx 0 48rpx 20rpx;
			padding-left: 24rpx;
			border-left: 10rpx solid #EB0000;
		}

		// 送货网格员
		.operator {
			.icons {
				width: 16rpx;
				height: 18rpx;
				margin-right: 8rpx;
				top: -1rpx;
			}

			.picture-info {
				padding: 28rpx 20rpx 30rpx 0;

				.picture {
					width: 72rpx;
					height: 72rpx;
					margin-right: 20rpx;
				}
			}

			.contact {
				border: 1px solid #FFB9B9;
				width: 120rpx;
				height: 48rpx;
				line-height: 48rpx !important;
			}
		}

		.delivery {
			display: grid;
			grid-template-columns: repeat(4, 140rpx);
			grid-gap: 20rpx;
		}

		// 代买商品
		.pick-picture {
			.picture {
				padding: 28rpx 0 24rpx;
			}

			// padding-top: 28rpx;
			.pick-codes {
				padding: 28rpx 0;
			}

			.picture-info {
				// padding-top: 28rpx;
				display: flex;
				flex-wrap: wrap;

				.info-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 20rpx;
					padding-bottom: 22rpx;
				}
			}
		}

		// 自营超市
		.supermarket {
			.picture-info {
				padding: 44rpx 0;
				display: grid;
				grid-gap: 28rpx;
			}

			.info-img {
				display: grid;
				padding-right: 28rpx;
				grid-template-columns: 120rpx 1fr;
				grid-gap: 28rpx;
			}

			.titles {
				padding: 16rpx 0;
			}
		}

		// 送货地址
		.shipto {
			.shipto-info {
				padding: 36rpx 0 32rpx;
			}

		}

		// 取件信息 || 手机号码
		// .information {
		// 	.shipto-info {
		// 		padding-top: 28rpx;
		// 	}

		// 	.end {
		// 		width: 202rpx;
		// 	}

		// 	.name {
		// 		width: 220rpx;
		// 	}

		// 	.infor {
		// 		display: grid;
		// 		grid-row-gap: 12rpx;
		// 		padding-bottom: 24rpx;
		// 	}

		.rmation {
			display: flex;
			display: grid;
			grid-template-columns: repeat(3, 33.33%);
			padding-right: 25rpx;
			box-sizing: border-box;

			.rmation-code {
				padding-bottom: 24rpx;
			}

			.right {
				text-align: right;
			}

			.left {
				text-align: left;
			}
		}

		// }

		// 订单信息
		.ordering {
			.copy {
				border-radius: 100rpx;
				background: #FFF0F0;
				color: #EE4747;
				width: 72rpx;
				height: 36rpx;
				margin-left: 24rpx;
			}

			.ordering-infos {
				display: grid;
				grid-row-gap: 20px;
				padding: 28rpx 0 30rpx;

				.info-width {
					width: 156rpx;
				}
			}
		}

		// 底部操作
		.operate {

			.operate-dis {
				padding: 16rpx;
			}
		}

		// 订单跟踪
		.tracking {
			padding: 24rpx 0 44rpx;

			.icon-guanbi {
				right: 36rpx;
				// top: 36rpx;
			}
		}

		.flow-path {
			padding: 0 53rpx;

			.margin0 {
				margin: 0;
			}

			.path {
				padding-bottom: 62rpx;
			}

			.yuan {
				width: 16rpx;
				height: 16rpx;
				position: relative;
				z-index: 10;
				border: 8rpx solid #ffffff;
				margin-right: 32rpx;
				background: #D6D6D6;
				border-radius: 100rpx;
			}

			.tiao {
				width: 1px;
				height: 240%;
				background: #D6D6D6;
				top: 10px;
				left: 16rpx;
			}
		}
	}
</style>